<!-- 帖子发表页 -->
<template>
    <div class="app">
        <div class="post-container">
            <el-form ref="form" :model="form" label-width="80px">
                <!-- 标题输入框 -->
                <el-form-item label="帖子标题" class="full-width">
                    <el-input v-model="form.title" placeholder="请输入标题" maxlength="50" show-word-limit></el-input>
                </el-form-item>
                
                <!-- 帖子正文 -->
                <el-form-item label="帖子正文" class="full-width">
                    <el-input type="textarea" :rows="8" v-model="form.mainboby" 
                        placeholder="请输入正文内容" maxlength="1000" show-word-limit></el-input>
                </el-form-item>

                <!-- 图片上传区域 -->
                <el-form-item label="上传图片" class="upload-container">
                    <el-upload
                        ref="upload"
                        class="image-uploader"
                        action="/file/upload"
                        :show-file-list="true"
                        :on-success="handleImageSuccess"
                        :before-upload="beforeImageUpload"
                        :limit="9"
                        :headers="headers"
                        multiple
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
                    </el-upload>
                </el-form-item>

                <!-- 帖子设置 -->
                <div class="post-settings">
                    <el-form-item label="帖子分类">
                        <el-select v-model="form.category" placeholder="请选择分类">
                            <el-option label="花艺分享" value="flower_share"></el-option>
                            <el-option label="养护心得" value="care_tips"></el-option>
                            <el-option label="花语故事" value="flower_story"></el-option>
                            <el-option label="购买建议" value="purchase_advice"></el-option>
                        </el-select>
                </el-form-item>
                </div>

                <!-- 提交按钮 -->
                <el-form-item class="submit-buttons">
                    <el-button type="primary" @click="onSubmit" :loading="submitting">发布帖子</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                category: '',
                anonymity: false,
                title: '',
                mainboby: '',
            },
            imageUrls: [], // 存储上传的图片URL
            submitting: false
        }
    },
    methods: {
        handleImageSuccess(res) {
            this.imageUrls.push(res);
        },
        beforeImageUpload(file) {
            const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt5M = file.size / 1024 / 1024 < 5;

            if (!isJPGOrPNG) {
                this.$message.error('只能上传JPG/PNG格式的图片！');
                return false;
            }
            if (!isLt5M) {
                this.$message.error('图片大小不能超过5MB！');
                return false;
            }
            return true;
        },
        onSubmit() {
            if (!this.form.title.trim()) {
                this.$message.error('请输入帖子标题');
                return;
            }
            if (!this.form.mainboby.trim()) {
                this.$message.error('请输入帖子内容');
                return;
            }
            if (!this.form.category) {
                this.$message.error('请选择帖子分类');
                return;
            }

            this.submitting = true;
            // 将图片URL用逗号拼接存入type字段
            const postData = {
                ...this.form,
                type: this.imageUrls.join(',')
            };

            this.request.post("/originalposts/create", postData).then(res => {
                this.submitting = false;
                if (res.code != null) {
                    this.$message.success('发布成功！');
                    // 清空表单内容
                    this.resetForm();
                    // 清空图片上传列表
                    this.$refs.upload.clearFiles();
                    // 重置图片URL数组
                    this.imageUrls = [];
                } else {
                    this.$message.error('发布失败，请重试');
                }
            }).catch(() => {
                this.submitting = false;
                this.$message.error('发布失败，请重试');
            });
        },
        resetForm() {
            // 重置表单数据
            this.form = {
                category: '',
                anonymity: false,
                title: '',
                mainboby: '',
            };
            // 清空图片URL数组
            this.imageUrls = [];
            // 重置表单验证状态
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            }
            // 清空图片上传列表
            if (this.$refs.upload) {
                this.$refs.upload.clearFiles();
            }
        }
    }
}
</script>

<style scoped>
.app {
    min-height: 100vh;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

.post-container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.full-width {
    width: 100%;
}

.el-form-item {
    margin-bottom: 25px;
}

.upload-container {
    margin: 30px 0;
}

.image-uploader {
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    background-color: #fafafa;
    padding: 20px;
}

.image-uploader:hover {
  border-color: #409EFF;
    background-color: #f5f7fa;
}

.post-settings {
    background-color: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
}

.submit-buttons {
  text-align: center;
    margin-top: 40px;
}

.el-upload__tip {
    color: #909399;
    font-size: 13px;
    margin-top: 15px;
}

:deep(.el-form-item__label) {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

:deep(.el-input__inner) {
    height: 45px;
    line-height: 45px;
    font-size: 16px;
}

:deep(.el-textarea__inner) {
    font-size: 16px;
    padding: 15px;
    line-height: 1.6;
}

:deep(.el-button) {
    padding: 12px 30px;
    font-size: 16px;
}

:deep(.el-upload--picture-card) {
    width: 150px;
    height: 150px;
    line-height: 150px;
    margin: 0 10px 10px 0;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 150px;
    height: 150px;
    margin: 0 10px 10px 0;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .post-container {
        width: 100%;
        padding: 15px;
    }

    .post-settings {
        padding: 15px;
    }
}
</style>